<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;

        }
        ul{
            width: 800px;
            height: 600px;
            background-color: orange;
        }
        li{
            list-style: none;
            width: 100px;
            height:100px;
            float: left;
            margin: 10px;

            background-color: skyblue;
        }

        button{
            width: 200px;
            height: 50px;
        }
    </style>
</head>
<body>
    <button>点击插入</button>
    <ul>
        <li>葡萄</li>
        <li>桃</li>
        <li>李子</li>
        <li>西瓜</li>
        <p>哈哈</p>
        <li>甜瓜</li>
        <li>荔枝</li>
        <p>呵呵</p>
        <li>榴莲</li>
        <li>山竹</li>
    </ul>
    <script>


        // 事件委托  
        // 把子元素的事件交给父元素来绑定
        // 在父元素事件内 通过事件目标来判断 准确触发事件的元素
        // 点击按钮 往ul中插入一个元素 


        // 优势:
        //  1. 减少dom的操作 不用频繁获取每个子元素 
        //  2. 对后期动态操作的元素非常友好 

        // 给每个li 绑定点击事件(希望新添加的也绑上)  点击谁输出标签中间的内容 


        // // 获取元素 
        // var btn = document.querySelector('button');
        // var lis = document.querySelectorAll('ul > li');
        // var ul = document.querySelector('ul');

        // // 给每个li绑定点击事件  

        // lis.forEach(function(item){
        //     item.onclick = function(){
        //         alert(item.innerText);
        //     }
        // });

        // btn.onclick = function(){
        //     for(var i=0;i<6;i++){
        //         var li = document.createElement('li');
        //         li.innerText = '我是新来的'+(i+1);
        //         ul.appendChild(li)
        //     }
        // }

        // 缺点1:
        // 上面能实现 点击按钮添加元素 
        // 但是新添加的元素 没法绑定点击事件 

        // 缺点:
        //  循环给每个li绑定点击事件 (过多的操作dom元素)非常消耗资源 




        // 优化 

        //  获取元素 
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');


        ul.addEventListener('click',function(e){
            e = e || window.event;
            // 通过事件目标获取li
            // console.log(e.target);
            // alert(e.target.innerText);
            if(e.target.nodeName == 'LI'){
                alert(e.target.innerText);
            }
        })

        // 相比较上面  不用获取每个li 
        // 不用循环给每个li绑定点击事件  
        // 减少了dom的操作

        // console.dir(ul);


        //  btn.onclick = function(){
        //     for(var i=0;i<6;i++){
        //         var li = document.createElement('li');
        //         li.innerText = '我是新来的'+(i+1);
        //         ul.appendChild(li)
        //     }
        // }

    </script>
</body>
</html>